<template>
  <div class="honor-list">
    <div class="honor-title">{{ title }}</div>
    <div class="honor" v-for="(item, index) in honorList" :key="index">
      <div class="honor-left">
        {{ item.honorary_name }}
        <img src="../assets/img/icon-close.png" alt="" v-if="showClose" @click="toDelete(item.id)">
      </div>
      <div class="honor-right"><img :src="item.voucher" alt="" width="60" height="60"></div>
    </div>
    <div class="add-honor" v-if="showAdd" @click="toAdd">
      <span>点击上传你的荣誉吧</span>
      <span style="font-size:45px;line-height: 40px;">+</span>
    </div>
    <van-dialog
      v-model="showAddHonor"
      class="close-dialog"
      :before-close="toAddHonor">
      <van-field v-model="honor.honorary_name" label="荣誉名称"/>
      <div class="upload">
        <van-uploader v-model="fileList" multiple :max-count="1" :after-read="afterRead"/>
      </div>
      <div class="des">每个荣誉可附一张证书！</div>
      <div class="close" slot="title" @click="showAddHonor = false"><img src="../assets/img/icon-close.png" alt=""></div>
    </van-dialog>
  </div>
</template>

<script>
import api from '@/api'
export default {
  name: 'honor',
  data () {
    return {
      showAddHonor: false,
      fileList: [],
      honor: {
        honorary_name: '',
        image: null
      },
      honorList: [],
      user: {}
    }
  },
  methods: {
    toAdd () {
      this.showAddHonor = true
    },

    afterRead (file) {
      this.honor.image = file.file
    },
    toAddHonor (action, done) {
      // this.honor.id = 1
      if (!this.honor.honorary_name || !this.honor.image) {
        this.$toast('名称图片都要填写')
        done(false)
        return
      }
      let formData = new FormData()
      formData.append('id', this.user.id)
      formData.append('image', this.honor.image)
      formData.append('honorary_name', this.honor.honorary_name)
      api.addHonor({
        params: formData,
        callback: res => {
          if (res.data.error_code === 0) {
            done()
            this.initHonor()
          } else {
            this.$toast(res.data.message)
            done(false)
          }
        }
      })
    },
    toDelete (id) {
      this.$dialog.confirm({
        title: '提示',
        message: '确认删除荣誉吗？'
      }).then(() => {
        api.deleteHonor({
          params: {id},
          callback: res => {
            if (res.data.error_code === 0) {
              this.$toast.success('删除成功')
              this.initHonor()
            }
          }
        })
      }).catch(() => {
        this.$toast('已取消')
      })
    },

    initHonor () {
      api.honorList({
        params: {student_id: this.user.id},
        callback: res => {
          if (res.data.error_code === 0) {
            this.honorList = res.data.data
          }
        }
      })
    }
  },
  props: {
    showAdd: {
      type: Boolean,
      required: false,
      default: false
    },
    title: {
      type: String,
      required: false,
      default: '我的荣誉'
    },
    showClose: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  created () {
    if (this.$route.query.sid) {
      this.user = {id: this.$route.query.sid}
    } else {
      this.user = JSON.parse(window.sessionStorage.getItem('user'))
    }
    this.initHonor()
  }
}
</script>

<style scoped>
  .honor-list{
    padding: 20px 15px;
  }
  .honor-title{
    font-size:18px;
    font-family:PingFang SC;
    font-weight:bold;
    line-height:25px;
    color:rgba(30,30,30,1);
  }
  .honor{
    display: flex;
    align-items: flex-start;
    margin-top: 10px;
  }
  .honor-left{
    flex-shrink: 1;
    flex-grow: 1;
    line-height: 60px;
    padding-bottom: 6px;
    border-bottom: 1px solid #CCCCCC;
    font-family: PingFangBlod;
    position: relative;
  }
  .honor-left img{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 10px;
  }
  .honor-right{
    flex-shrink: 0;
    flex-grow: 0;
  }
  .add-honor{
    color: #3A7FE2;
    border-radius: 6px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }
  .upload{
    text-align: center;
    margin-top: 20px;
  }
  .des{
    font-family:PingFang SC;
    font-weight:400;
    line-height:25px;
    color:rgba(102,102,102,1);
    text-align: center;
    padding-bottom: 10px;
  }
</style>
